<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>APP</title>
		<link href="css/weui.min.css" rel="stylesheet" />
		<link href="css/jquery-weui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="fonts/iconfont.css" rel="stylesheet" />
		<script src="js/immersed.js"></script>
	</head>
	<style>
		.weui-label {
			width: 80px;
		}
		
		.tab-item {
			color: #999;
		}
		
		.tab-item {
			color: #999;
		}
		
		.tab-active .tab-label,
		.tab-active .iconfont {
			color: #45a75c;
		}
		
		.tab-item .iconfont {
			font-size: 27px;
			margin-top: -2px;
		}
		
		.tab-item .tab-label {
			font-size: 11px;
			margin-top: -10px;
		}
		
		.footer-tab {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			height: 50px;
		}
		
		.footer-tab .tab-item {
			display: block;
			float: left;
			width: 25%;
			text-align: center;
		}
	</style>

	<body>

		<div id="app">
			<div class="footer-tab line-top">
				<template v-for="(vo,index) in tabs">
					<div class="tab-item" :class="{'tab-active':vo.active}" @click="setTabs(index)">
						<p :class="[vo.active ? vo.iconactive : vo.icon, 'iconfont']"></p>
						<p class="tab-label">{{vo.title}}</p>
					</div>
				</template>
			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/smarge.js"></script>
		<script src="js/common.js"></script>
		<script src="js/update.app.js"></script>

		<script type="text/javascript" charset="utf-8">
			mui.init();

			mui.plusReady(function() {

				// 关闭侧滑返回功能
				var wv = plus.webview.currentWebview();
				wv.setStyle({
					'popGesture': 'none'
				});

				//更新用户资料
				reGetUserInfo();

				//安卓提示升级
				updateApp()

				//定时查询保证金
				var t = window.setInterval("checkBond()", 10000);
				window.checkBond = function() {
					var userinfo = getUserInfo() || undefined;
					if(userinfo != undefined) {
						var bond = Number(userinfo.bond),
							arrears = Number(userinfo.arrears);
						if(arrears > 0) {
							if(bond <= arrears) {
								mui.alert('保证金用完了，请及时补充！')
							} else if(bond - arrears < 1000) {
								mui.alert('保证金不足1000，请及时补充！')
							} else {
								window.clearInterval(t);
							}
						} else {
							window.clearInterval(t);
						}
					}
				}

				var self = plus.webview.currentWebview();
				var tabsCurrent = '';
				var tabsWebview = {};

				var vm = new Vue({
					el: '#app',
					data: {
						tabs: [{
								title: '云库',
								id: 'goods',
								url: 'goods.html',
								icon: 'icon-choiceness',
								iconactive: 'icon-choicenessfill',
								styles: {
									top: '0px',
									bottom: '50px'
								},
								active: true
							}, {
								title: '分类',
								id: 'fenlei',
								url: 'fenlei.html',
								icon: 'icon-similar',
								iconactive: 'icon-similar',
								styles: {
									top: '0px',
									bottom: '50px'
								},
								active: false
							},
							{
								title: '找货',
								id: 'zhaohuo',
								url: 'zhaohuo.html',
								icon: 'icon-we',
								iconactive: 'icon-wefill',
								styles: {
									top: '0px',
									bottom: '50px'
								},
								active: false
							},
							{
								title: '我的',
								id: 'my',
								url: 'my.html',
								icon: 'icon-my1',
								iconactive: 'icon-myfill1',
								styles: {
									top: '0px',
									bottom: '50px'
								},
								active: false
							}
						]
					},
					mounted: function() {
						this.inits()
					},
					methods: {
						inits: function() {
							//预加载页面，并显示默认页面
							this.tabs.map(function(v, i) {
								tabsWebview[v.id] = plus.webview.create(v.url, v.id, v.styles);
								self.append(tabsWebview[v.id]);
								plus.webview.hide(tabsWebview[v.id])
							});
							this.setTabs(0);
						},

						setTabs: function(index) {
							if(tabsCurrent == this.tabs[index].id) {
								return;
							}
							this.tabs.map(function(v, i) {
								if(i == index) {
									v.active = true;
									plus.webview.show(tabsWebview[v.id]);
									plus.webview.hide(tabsWebview[tabsCurrent]);
									tabsCurrent = v.id;
								} else {
									v.active = false
								}
							});

						},
					}
				});

			});

			(function($, doc) {
				$.plusReady(function() {
					$.oldBack = mui.back;
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if(backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};
				});
			}(mui, document));
		</script>
	</body>

</html>